<!DOCTYPE HTML>
<html>
<head>
<title>ECMAScript 8都发布了，你还没有用上ECMAScript 6？-网站建设响应式模版</title>
<meta name="renderer" content="webkit">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="generator" content="MetInfo 5.3.19"  data-variable="https://show.metinfo.cn/muban/res022/328/,cn,4,46,2,res022" />
<meta name="description" content="ES8已经与17年6月底发布，而很多的前端开发者还没有开始用上ES6。本文聊一聊怎么快速入门ES6，并将ES6的语法应用到实战项目中。阅读全文大约需要15分钟。文中以 ES 表示 ECMAScript。今年六月底，TC39发布新一版的ES 8（ES 2017），自从ES6在15年发布之后，每一年TC39都会发布新一版的ES语言标准。我了解的前端开发者中，还有很多人没有用上ES6，有的人是觉得ES5" />
<meta name="keywords" content="设计建站|网站设计|建站公司" />
<link href="../favicon.ico" tppabs="https://show.metinfo.cn/muban/res022/328/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel='stylesheet' href="../templates/res022/cache/metinfo.css-20171218.css" tppabs="https://show.metinfo.cn/muban/res022/328/templates/res022/cache/metinfo.css?20171218">
</head>
<body class="ny">
<!--[if lte IE 8]>
	<div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100">
	<p class="browserupgrade font-size-18">你正在使用一个<strong>过时</strong>的浏览器。请<a href="javascript:if(confirm(%27http://browsehappy.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://browsehappy.com/%27" tppabs="http://browsehappy.com/" target="_blank">升级您的浏览器</a>，以提高您的体验。</p>
	</div>
<![endif]-->
<div class="loading-box">
<div class="load-svg">
<link href="../../../../../fonts.googleapis.com/css-family=Cabin+Condensed-700.css" tppabs="https://fonts.googleapis.com/css?family=Cabin+Condensed:700" rel='stylesheet' type='text/css'>
<svg class="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 574.558 120" preserveAspectRatio="xMinYMin meet" enable-background="new 0 0 574.558 120" tppabs="https://show.metinfo.cn/muban/res022/328/news/new 0 0 574.558 120" xml:space="preserve">
  <defs>
    <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
      <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
    </pattern>
    <text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-family="'Cabin Condensed'" font-size="161.047">LOADING</text>
    <mask id="text-mask">
      <use x="0" y="0" xlink:href="#text" opacity="1" fill="#ffffff"/>
    </mask>
  </defs>
    <use x="0" y="0" xlink:href="#text" fill="#e3120b"/>
  <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" x="-400" y="0" width="1600" height="120"/>
</svg>
</div>
</div>
<nav class="met-nav nav-ny" role="navigation">
<div class="nav-logo">
				<a href="../index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/" class="logo" title="网站建设响应式模版">
					<h3 class='hide'>网站建设响应式模版</h3>
				<img class="logo1" src="../../../../../images.metinfo.cn/m/res022/328/upload/res022/328/201709/1504694078.png" tppabs="https://images.metinfo.cn/m/res022/328/upload/res022/328/201709/1504694078.png" alt="网站建设响应式模版" title="网站建设响应式模版" />

				<img class="logo2" src="../../../../../images.metinfo.cn/m/res022/328/upload/res022/328/201709/1504693511.png" tppabs="https://images.metinfo.cn/m/res022/328/upload/res022/328/201709/1504693511.png"alt="网站建设响应式模版" title="网站建设响应式模版" />

				</a>

				<h2 class='hide'>公司动态</h2>

			</div>


      <div class="nav-box"> 
        <ul class="nav-ul swiper-nav">

          <li class="nav-li">
          <a href="../index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/" title="首页" class="link ">
              <b>首页</b>
            </a>
          </li>

          <li class="nav-li ">
            <a href="../about/index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/about/"  title="关于"><b>关于</b></a>

          <li class="nav-li ">
            <a href="../cases/index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/cases/"  title="案例"><b>案例</b></a>

          <li class="nav-li ">
            <a href="../service/index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/service/"  title="服务"><b>服务</b></a>

          <li class="nav-li active">
            <a href="index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/news/"  title="资讯"><b>资讯</b></a>

          <li class="nav-li ">
            <a href="../contact/index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/contact/"  title="联系"><b>联系</b></a>

          </li>

        </ul>
      </div>

</nav>
<div class="met-video">
<div class="hide"><p><video class="metvideobox" data-metvideo="420|280||false|http://zy.fwwl.net/video/banner12.mp4" style="width:420px; height:280px; background:#000 url() no-repeat 50% 50%; background-size:contain;" /></video></p></div>
<video src="" type="video/mp4"  loop id="media"></video>
<div class="video-bg" style="background-image:url(../upload/201709/1505189174.jpg)/*tpa=https://show.metinfo.cn/muban/res022/328/upload/201709/1505189174.jpg*/;background-size:cover;background-position:center;background-repeat:no-repeat;"></div>
</div>
<div class="nav-side">
<hr>
<hr>
<hr>
</div>
<div class="side-box">
<div class="side-cut">
<div class="side-shadow"></div>
<div class="side-nav">
<div class="side-close">
<i class="icon pe-close"></i>
</div>
<div class="logo-2">
<img src="../../../../../images.metinfo.cn/m/res022/328/upload/res022/328/201709/1504693511.png" tppabs="https://images.metinfo.cn/m/res022/328/upload/res022/328/201709/1504693511.png" alt="">
</div>

<ul class="navlist">

				<li class="nav-item1"><a href="../index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/" title="首页" class="link ">首页</a></li>



					<li class="nav-item1"><a href="../about/index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/about/"  title="关于" class="link ">关于</a></li>



					<li class="nav-item1"><a href="../cases/index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/cases/"  title="案例" class="link ">案例</a></li>



					<li class="nav-item1"><a href="../service/index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/service/"  title="服务" class="link ">服务</a></li>



					<li class="nav-item1"><a href="index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/news/"  title="资讯" class="link active">资讯</a></li>



					<li class="nav-item1"><a href="../contact/index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/contact/"  title="联系" class="link ">联系</a></li>


<div class="side-foot">
<div class="side-qrcode">
<img src="../../../../../images.metinfo.cn/m/res022/328/upload/res022/328/201709/1504756160.png" tppabs="https://images.metinfo.cn/m/res022/328/upload/res022/328/201709/1504756160.png" alt="">
</div>
<div class="side-phone">
<p>
<a href="tel:18312533116">官方热线：18312533116</a>
</p>
</div>
<div class="side-text">Copyright © 2017 互联网科技公司</div>
</div>
</ul>

</div>
</div>
</div>


<section class="met-shownews animsition">
	<div class="container">
		<div class="row">
			<div class="met-shownews-body">
				<div class="row">
					<div class="met-shownews-header">
						<h1>ECMAScript 8都发布了，你还没有用上ECMAScript 6？</h1>
						<div class="info">
							<span>2017-09-12 15:57:26</span>
							<div class="right"><span>由 admin 发表</span></div>

						</div>
					</div>
					<div class="met-editor lazyload clearfix">
						<div><p>ES8已经与17年6月底发布，而很多的前端开发者还没有开始用上ES6。本文聊一聊怎么快速入门ES6，并将ES6的语法应用到实战项目中。</p><p>阅读全文大约需要15分钟。</p><p>文中以 ES 表示 ECMAScript。</p><p>今年六月底，TC39发布新一版的ES 8（ES 2017），自从ES6在15年发布之后，每一年TC39都会发布新一版的ES语言标准。</p><p>我了解的前端开发者中，还有很多人没有用上ES6，有的人是觉得ES5用的挺好的，懒得去学ES6，有的人是有想学ES6的决心，但是苦于没有合适的机会（项目）去实战练习。</p><p>如果你用过React，Vue或Nodejs等，那你多多少少都会使用到一些ES6语法的。</p><p>ES8中的新特性，浏览器厂商和语法转换器还需要一段来实现，不如我们还是先聊聊怎么在你的项目中用上ES6吧。</p><p>什么是ES6？它和ES5有什么区别？</p><p>我们常说的JavaScript是指ES3和ES5，ES6是ECMAScript 6 的缩写。</p><p>对于经常写原生JavaScript的前端开发者来说，对ES5中的语法肯定比较熟悉，比如数组中的一些方法forEach，map，filter，some，every，indexOf，lastIndexOf，reduce，reduceRight ……，以及对象（Object）和函数（Function）都拓展了很多方法，这里不多赘叙。</p><p>ES6给前端开发者带来了很多的新的特性，可以更简单的实现更复杂的操作，很大的提高开发效率，提高代码的整洁性。</p><p>ES6中的新特性有很多，列一些比较常用的特性：</p><p>Block-Scoped Constructs Let and Const（块作用域构造Let and Const）</p><p>Default Parameters（默认参数）</p><p>Template Literals （模板字符串）</p><p>Multi-line Strings （多行字符串）</p><p>Arrow Functions （箭头函数）</p><p>Enhanced Object Literals （增强的对象文本）</p><p>Promises</p><p>Classes（类）</p><p>Modules（模块）</p><p>Destructuring Assignment （解构赋值）</p><p>下面介绍下这些常用的ES6特性。</p><p>Block-Scoped Constructs Let and Const（块作用域构造Let and Const）</p><p>ES6提供了两个新的声明变量的关键字：let和const。而let和const要和块级作用域结合才能发挥其优势。</p><p>什么是块级作用域？</p><p>块级作用域的表示一对大括号{}包围的区域是一个独立的作用域，在这个作用域内用let声明的变量a，只能在这个作用域内被访问到，在这对大括号外面是访问不到a的。</p><p>当然，在块级作用域中还可以声明函数，该函数也是只能作用域内部才能被访问到。所以，在if、else、for甚至是一对单独的{}，都是一个块级作用域。</p><p>在ES6之前，是没有块级作用域的概念的，只有全局作用域和函数作用域两种，并且，用var声明的变量和用function声明的函数会被提前到作用域的顶部，这也就是我们常说的声明提前。</p><p>用let声明的变量是存在于距离声明语句最近的一个作用域（全局作用域、函数作用域或块级作用域）内的，在声明的时候，可选的将其初始化成一个值。</p><p>语法如下：</p><p><br/></p><p>let var1 [= value1] [, var2 [= value2 ] ] [, ..., varN [= valueN]] ;</p><p>这一点与var的声明不同，用var声明的变量是属于离他最近的一个全局作用域或函数作用域中，且声明会被提前。在块级作用域中，var的声明与在全局作用域和函数作用域中是一样的。</p><p><br/></p><p>块级作用域和let声明变量，解决了使用var一些痛点，相当于用let声明的变量不会被提前到作用域顶部。</p><p><br/></p><p>有一点需要注意，let也是声明提前,但是let声明变量的语句必须在使用该变量语句之前，在声明之前引用会报错该变量未被声明，且let不允许重复声明相同名称的变量，否则会报错。我们看下例子：</p><p><br/></p><p>{</p><p>&nbsp; var hello = &#39;Hello&#39;;</p><p>&nbsp; let world = &#39;World&#39;;</p><p>}</p><p>console.log(hello);</p><p>console.log(world);</p><p>在Chrome浏览器的控制台（最新版本的Chrome已支持一部分ES6语法）执行一下，会发现有报错，见下图。constconst声明与let基本相同，它也是存在于块级作用域内。</p><p>有一点区别就是const声明的是常量，即不可被重新赋值改变原值。需要注意，const在声明常量的时候，必须同时给常量初始化赋值。如果只声明，不初始化值的话，会报错。见下面代码。</p><p>const MAX;</p><p>// Uncaught SyntaxError: Missing initializer in const declaration</p><p>声明变量的方法</p><p>在ES5中，可以通过var和function这两种方法来声明变量。</p><p><br/></p><p>而在ES6中，除了增加了let和const两种声明方式，还有接下来要介绍的import和class的声明方式。</p><p>Default Parameters（默认参数）</p><p>默认参数是ES6中对函数拓展的一个特性，可以直接为函数的参数设置默认值，当某一参数设置了默认值时，如果调用函数的时候没有传该参数，则该参数的值为默认值，如果传了该参数，则该参数的值为传递的参数值。</p><p>在ES6之前，我们可以通过手动的方式，为函数的参数设置默认值，代码如下：</p><p>function sign (x) {</p><p>&nbsp; if (typeof x === &#39;undefined&#39;) {</p><p>&nbsp; &nbsp; x = &#39;default&#39;</p><p>&nbsp; }</p><p>&nbsp; console.log(x)</p><p>}</p><p>sign(&#39;new sign&#39;) &nbsp; &nbsp;// new sign</p><p>sign() &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// default</p><p>将上述代码换成ES6模式，可以这样写：</p><p><br/></p><p>function sign (x = &#39;default&#39;) {</p><p>&nbsp; console.log(x) &nbsp; &nbsp;</p><p>}</p><p>sign(&#39;new sign&#39;) &nbsp; &nbsp;// new sign</p><p>sign() &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// default</p><p>Template Literals （模板字符串）</p><p><br/></p><p>ES6提供了模板字符串的特性，模板字符串是使用反引号（`）和${}实现字符串的拼接，字符串中可以嵌入变量。</p><p>在ES6之前，我们一般这样输出模板：</p><p>var name = &#39;Henry&#39;;</p><p>var welcome = &#39;Hello, &#39; + name + &#39;!&#39;;</p><p>console.log(welcome); &nbsp; // Hello, Henry!</p><p>在ES6中，模板字符串可以这样拼接字符串：</p><p>let name = &#39;Henry&#39;;</p><p>let welcome = `Hello, ${ name }!`;</p><p>console.log(welcome); &nbsp; // Hello, Henry</p><p>模板字符串的计算规则是在两个反引号之间将字符串拼接到一起，如果反引号之间含有${}，则会计算这对大括号内的值，大括号里面可以是任意的JavaScript表达式，可以进行运算和引用对象属性。</p><p>let a = 3;</p><p>let number = `$ {a + 2 }`;</p><p>console.log(`${ number }`); &nbsp; &nbsp;// 5</p><p><br/></p><p>let b = { c: 2, d: 4 };</p><p>console.log(`${ b.c * b.d }`) ; &nbsp; &nbsp; // 8</p><p>Multi-line Strings （多行字符串）</p><p><br/></p><p>多行字符串是模板字符串的拓展，它跟模板字符串是同样的解析方式，不同的是，它可以拼接多行的字符串，且拼接的字符串中会保留所有的空格和缩进。</p><p>如果需要用字符串来拼接DOM树结构时，可以这样写：</p><p>let titleValue = &#39;This is a title&#39;；</p><p>let htmlStr = `</p><p>&nbsp;</p><div></div><p></p><p>&nbsp; &nbsp; &nbsp;</p><h2>${ titleValue }</h2><p></p><p>&nbsp; &nbsp; &nbsp;</p><p>This is a paragraph.</p><p>&nbsp;</p><p>`;</p><p>上述代码中，能看到JavaScript代码和伪html代码的结合，完全可以将模板字符串的多行字符串封装成一个页面模板工具，绝对是轻量高效的。</p><p>还有，这种书写方式是不是很眼熟，跟React的JSX是不是很像双胞胎啊。</p><p>Arrow Functions （箭头函数）</p><p>在ES6中，可以使用箭头（=&gt;）来声明一个函数，称作箭头函数。</p><p>ES5中声明一个函数，可以这样写：</p><p>var func = function (a) {</p><p>&nbsp; return a + 2;</p><p>}</p><p>将这个函数换成 箭头函数：</p><p>let func = a =&gt; a + 2;</p><p>如果函数有多个参数，需要用括号包含所有参数，只有一个参数的时候，可以省略括号，如果没有设置参数，也必须有括号。示例如下：</p><p><br/></p><p>let func1 = (arg1, arg2, arg3) =&gt; {</p><p>&nbsp; return arg1 + arg2 + arg3;</p><p>}</p><p><br/></p><p>let func2 = arg =&gt; {</p><p>&nbsp; console.log(arg)</p><p>}</p><p>let func3 = () =&gt; {</p><p>&nbsp; console.log(`This is an arrow function.`)</p><p>}</p><p>需要注意的是，箭头函数没有自己的this，如果在箭头函数内部使用this，那样这个this是箭头函数外部的this，也是因为箭头函数没有this，所以，箭头函数不能用作构造函数。如果用箭头函数来写回调函数时，就不用再将外部this保存起来了。</p><p>// ES5</p><p>function foo() {</p><p>&nbsp; var _this = this;</p><p>&nbsp; &nbsp;&nbsp;</p><p>&nbsp; setTimeout(function() {</p><p>&nbsp; &nbsp; console.log(&#39;id:&#39;, _this.id); &nbsp; &nbsp; &nbsp; &nbsp;</p><p>&nbsp; }, 200)</p><p>}</p><p>// ES6</p><p>function foo() {</p><p>&nbsp; setTimeout(() =&gt; {</p><p>&nbsp; &nbsp; console.log(`id:${ this.id }`) &nbsp; &nbsp; &nbsp; &nbsp;</p><p>&nbsp; }, 200)</p><p>}</p><p>Enhanced Object Literals （增强的对象文本）</p><p><br/></p><p>在ES6，对象字面值扩展支持在创建时设置原型，简写foo：foo分配，定义方法，加工父函数（super calls），计算属性名(动态)。总之，这些也带来了对象字面值和类声明紧密联系起来，让基于对象的设计得益于一些同样的便利。</p><p><br/></p><p>var obj = {</p><p>&nbsp; // __proto__ 原型</p><p>&nbsp; __proto__: theProtoObj,</p><p>&nbsp; // Shorthand for ‘handler: handler’ &nbsp;简写</p><p>&nbsp; handler,</p><p>&nbsp; // Methods</p><p>&nbsp; toString() {</p><p>&nbsp; &nbsp; // Super calls &nbsp; &nbsp; 继承</p><p>&nbsp; &nbsp; return &quot;d &quot; + super.toString();</p><p>&nbsp; },</p><p>&nbsp; // Computed (dynamic) property names 计算属性名</p><p>&nbsp; [&#39;prop_&#39; + (() =&gt; 42)()]: &#39;name&#39;</p><p>};</p><p>Promises</p><p>Promise是异步编程的一种解决方案，它是一个对象，且只要开始就会一直进行下去，直到成功或者失败。就像它的字面意思诺言一样，一个诺言，只要被许下，就只有两种解决：成功或失败。</p><p>Promise的结果是由异步操作的结果决定的，且一旦结果形成，便不可再被改变，任何时候都得到同样的结果。</p><p>需要注意的是：Promise被新建后，便无法被取消，会执行下去，直到出现结果；如果不设置回调，Promise内部抛出的异常，不会反应到外部。</p><p><br/></p><div id="metinfo_additional"></div></div>

					</div>
					<div class="met-shownews-footer">

						<ul class="pager pager-round">
							<li class="previous ">
								<a href="shownews.php-lang=cn&id=44.htm" tppabs="https://show.metinfo.cn/muban/res022/328/news/shownews.php?lang=cn&id=44" title="做产品用得上的7个心理学理论">
									上一篇
									<span aria-hidden="true" class='hidden-xs'>：做产品用得上的7个心理学理论</span>
								</a>
							</li>
							<li class="next disabled">
								<a href="#" title="没有了">
									下一篇
									<span aria-hidden="true" class='hidden-xs'>：没有了</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div class="met-foot met-page clearfix">
<div class="left">

<div class="met-links text-center">

		<ol class="breadcrumb">
			<li>友情链接 :</li>

            <li>
                <a href="javascript:if(confirm(%27http://www.weibo.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://www.weibo.com/%27" tppabs="http://www.weibo.com/" title="" target="_blank">

                    微博

                </a>
            </li>

            <li>
                <a href="javascript:if(confirm(%27http://cdc.tencent.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://cdc.tencent.com/%27" tppabs="http://cdc.tencent.com/" title="" target="_blank">

                    腾讯CDC

                </a>
            </li>

            <li>
                <a href="javascript:if(confirm(%27http://www.baidu.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://www.baidu.com/%27" tppabs="http://www.baidu.com/" title="" target="_blank">

                    百度建站

                </a>
            </li>

		</ol>

</div>

		<div class="powered_by_metinfo">Powered&nbsp;by&nbsp;<a href="javascript:if(confirm(%27http://www.metinfo.cn/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://www.metinfo.cn/%27" tppabs="http://www.metinfo.cn/" target="_blank" title="企业网站管理系统">MetInfo&nbsp;5.3.19</a> &copy;2008-2018</div>

</div>
<div class="right">
    <div class="copyright">
        <p>深圳华创惟品科技有限公司 版权所有 2017-2018 All rights reserved. 京ICP备16031023号-1 </p>


    </div>

<div class="met-social">

				<a id="met-weixin"><i class="fa fa-weixin" data-plugin="webuiPopover" data-trigger="hover" data-animation="pop" data-placement='top' data-width='160' data-padding='0' data-content="<img src='' alt='ECMAScript 8都发布了，你还没有用上ECMAScript 6？-网站建设响应式模版' style='width: 150px;display:block;margin:auto;'>"></i></a>

				<a href="javascript:if(confirm(%27http://crm2.qq.com/page/portalpage/wpa.php?uin=4000084433&aty=0&a=0&curl=&ty=1  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://crm2.qq.com/page/portalpage/wpa.php?uin=4000084433&aty=0&a=0&curl=&ty=1%27" tppabs="http://crm2.qq.com/page/portalpage/wpa.php?uin=4000084433&aty=0&a=0&curl=&ty=1" rel="nofollow" target="_blank">
					<i class="fa fa-qq"></i>
				</a>

				<a href="" rel="nofollow" target="_blank"><i class="fa fa-weibo"></i></a>

				<a href="" rel="nofollow" target="_blank"><i class="icon fa-twitter"></i></a>

    <div class="dropdown">
    <a data-toggle="dropdown" class="langlist-btn" role="button" >
    <i class="fa fa-globe"></i>
    </a>
    <ul class="dropdown-menu animate animate-reverse" id="met-langlist-dropdown" role="menu">

            <li>
                <a href="../index.htm" tppabs="https://show.metinfo.cn/muban/res022/328/" title="简体中文">
                    简体中文
                </a>
            </li>

            <li>
                <a href="javascript:if(confirm(%27http://localhost/project/res022/index.php?lang=en  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://localhost/project/res022/index.php?lang=en%27" tppabs="http://localhost/project/res022/index.php?lang=en" title="English">
                    English
                </a>
            </li>

            <li>
                <a href="javascript:if(confirm(%27http://localhost/project/res022/index.php?lang=tc  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://localhost/project/res022/index.php?lang=tc%27" tppabs="http://localhost/project/res022/index.php?lang=tc" title="繁体中文">
                    繁体中文
                </a>
            </li>

        </ul>
        </div>

</div>

</div>
</div>



<script src="../templates/res022/cache/metinfo.js-20171218.js" tppabs="https://show.metinfo.cn/muban/res022/328/templates/res022/cache/metinfo.js?20171218"></script>

</body>
</html>